window.onload = function () {
    createTable();
}
var pageIndex = 0;  //用于存储页码
var pageSize = 5;   //每页显示的数量

//创建一个表格
function createTable() {
    //console.log(tableObj);
    var $tableBody = document.getElementById('tbody');  //获取表格体
    $tableBody.innerHTML = '';  //刷新表格体
    var tr_content = '' //定义表格内容
    var count = pageSize;   //计数
    var i = pageIndex * pageSize;
    while(count > 0) {
        var tr_data = tableObj.sites[i];
        if(tr_data) {
            var isvip=(tr_data.isvip=='true')?"是":"否";
            tr_content +=
                '<tr>' +
                '<td>'+ tr_data.uid +'</td>'+
                '<td>'+ tr_data.username +'</td>'+
                '<td>'+ tr_data.level +'</td>'+
                '<td>'+ isvip +'</td>'+
                '<td><a href="javascript:;" onclick="handleToDetail('+ i +')">详情</a></td>'+
                '</tr>';
        }
        i++;
        count--;
    }
    // console.log(tr_content)
    $tableBody.innerHTML = tr_content;
}

//用于操作详细信息的窗口
function handleToDetail(data) {
    var tr_data = tableObj.sites[data];
    var flag=true;
    createDetail(tr_data,flag);
    if (!flag)createNewDetail();

}
//创建详细信息窗口
function createDetail(data,flag) {
    var $detail = document.getElementById('detail');
    var $mask = document.getElementById('mask');
    var $content = document.getElementById('content');
    //console.log(data)
    var isvip=(data.isvip=='true')?"是":"否";
    var str = `
    <ul class="list-group">
            <li class="list-group-item">uid: ${data.uid}</li>
            <li class="list-group-item">用户名: ${data.username}</li>
            <li class="list-group-item">等级: ${data.level}</li>
            <li class="list-group-item">Vip: ${isvip}</li>
            <li class="list-group-item">密码: ${data.userpassword}</li>
            <li class="list-group-item">注册日期: ${data.regdate}</li>
            <li class="list-group-item">注册地IP: ${data.regip}</li>
            <li class="list-group-item">最后一次登录地IP: ${data.lgip}</li>
        </ul>
    `;
    $content.innerHTML = str;
    $content.setAttribute('data-list',str);
    //console.log($content.getAttribute('data-list'))
    if (flag)$mask.style.display = 'block';
    if (flag)$detail.style.display = 'block';
    return;
}

function createNewDetail(data){
    var ref=window.open ('./detail.html', 'detailWindow', 'height=500, width=800, top=25,left=25, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}
//下一页
function nextPage() {
    pageIndex = pageIndex + 1;
    if(pageIndex > tableObj.sites.length / pageSize) return;
    createTable();
}
//上一页
function prePage() {
    pageIndex = pageIndex - 1;
    if(pageIndex < 0) return ;
    createTable();
}

//下一页(被迫弃用
function downpart() {
    var tbody = document.getElementById('tbody');
    tbody.innerHTML="";
    for (var i = Math.floor(tableObj.sites.length/2); i < tableObj.sites.length; ++i) {
        var trow = getDataRow(tableObj.sites[i]);
        tbody.appendChild(trow);
    }
}
//上一页（被迫弃用
function uppart(){
    var tbody = document.getElementById('tbody');
    tbody.innerHTML="";
    for (var i = 0; i < tableObj.sites.length/2; ++i) {
        var trow = getDataRow(tableObj.sites[i]);
        tbody.appendChild(trow);
    }
}
//隐藏详细信息窗口
function hideDetail() {
    var $detail = document.getElementById('detail');
    var $mask = document.getElementById('mask');
    $mask.style.display = 'none';
    $detail.style.display = 'none';
}

//查找数据
function searchData(){
    var $result = document.getElementById('result');
    var $resTableBody = document.getElementById('resTbody');  //获取表格体

    $resTableBody.innerHTML = '';  //刷新表格体
    var res_tr_content = '' //定义表格内容
    var count=tableObj.sites.length;
    var key=document.getElementById('input-key').value;
    var value=document.getElementById('input-value').value;

    //console.log(key);
    //转化汉字和布尔值
    if (value==='是'){
        value='true';
    }else if(value==='否'){
        value='false';
    }
    for (var i=0;i<count;++i){
        if (tableObj.sites[i][transfKey(key)]==value){
            var tr_data=tableObj.sites[i];
            var isvip=(tr_data.isvip=='true')?"是":"否";
            res_tr_content +=
                '<tr>' +
                '<td>'+ tr_data.uid +'</td>'+
                '<td>'+ tr_data.username +'</td>'+
                '<td>'+ tr_data.level +'</td>'+
                '<td>'+ isvip +'</td>'+
                '<td><a href="javascript:;" onclick="handleToDetail('+ i +')">详情</a></td>'+
                '</tr>';
        }
    }
    if (res_tr_content.length===0){
        alert('查无此项');
        document.getElementById('input-value').value='';
    }else {
        $result.style.display='block';
    }
    // console.log(tr_content)
    $resTableBody.innerHTML = res_tr_content;
}

function transfKey(orgin){
    if (orgin==='uid'){
        return 'uid';
    }else if (orgin==='用户名'){
        return 'username';
    }else if (orgin==='等级'){
        return 'level';
    }else if (orgin=='Vip'){
        return 'isvip';
    }else {
        return null;
    }
}


//建立表格的一行(已弃用
function getDataRow(h){
    var row = document.createElement('tr'); //创建行元素

    var uidCell=document.createElement('td'); //创建单元格
    uidCell.innerHTML =h.uid;
    row.appendChild(uidCell);

    var userNameCell=document.createElement('td');  //创建用户名单元格
    userNameCell.innerHTML=h.username;
    row.appendChild(userNameCell);

    var pwdCell=document.createElement('td');   //密码
    pwdCell.innerHTML=h.userpassword;
    row.appendChild(pwdCell);

    var regDateCell=document.createElement('td');   //注册时间
    regDateCell.innerHTML=h.regdate;
    row.appendChild(regDateCell);

    var levelCell=document.createElement('td'); //创建等级单元格
    levelCell.innerHTML=h.level;
    row.appendChild(levelCell);

    var isVipCell=document.createElement('td'); //创建vip单元格
    if (h.isvip=='true'){
        isVipCell.innerHTML="是";
    }else {
        isVipCell.innerHTML="否"
    }
    row.appendChild(isVipCell);

    //添加详细信息按钮
    var detailCell=document.createElement('td');
    detailCell.innerHTML= `<a href="javascript:;" onClick="handleToDetail('+ i +')">详情</a>`;
    row.appendChild(detailCell);
    detailCell.appendChild(btnDetail);
    return row;
}